<template>
	<!-- 系统消息 -->
	<view class="bg-white">
		<!-- <view v-if="info.type == 1"> -->
		<view class="bg-white p-2 mb-2">
			<view class="flex justify-between">
				<text class="font_36">{{ title }}</text>
				<text class="font_24 c_9">{{ dataTime(info.create_at) }}</text>
			</view>
		</view>
		<!-- </view> -->
		<!-- 子企业认证审核 -->
		<view class="" v-if="info.type_code == 1">
			<view class="bg-white p-2">
				<u--form labelPosition="left" :model="info.list" ref="inforef" labelWidth="100">
					<u-form-item label="关联企业" prop="company_name" borderBottom>
						<u--input v-model="info.list.company_name" border="none" color="#666" placeholder="未填写" disabled disabledColor="#fff"></u--input>
					</u-form-item>
					<u-form-item label="申请人" prop="applicant_name" borderBottom>
						<u--input v-model="info.list.applicant_name" border="none" color="#666" placeholder="未填写" disabled disabledColor="#fff"></u--input>
					</u-form-item>
					<u-form-item label="职位" prop="business_post" borderBottom>
						<u--input v-model="info.list.business_post" border="none" color="#666" placeholder="未填写" disabled disabledColor="#fff"></u--input>
					</u-form-item>
					<u-form-item label="邮箱" prop="mail" borderBottom>
						<u--input v-model="info.list.mail" border="none" color="#666" placeholder="未填写" disabled disabledColor="#fff"></u--input>
					</u-form-item>
					<u-form-item label="识别信息" prop="company_code">
						<u--input v-model="info.list.company_code" border="none" color="#666" placeholder="未填写" disabled disabledColor="#fff"></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="sys_btns">
				<view v-if="info.list.status == 0" class="flex justify-center">
					<button class="bg_main text-white h6 mx-1" @click="submit(2)">拒绝</button>
					<button class="bg-info text-white h6 mx-1" @click="submit(1)">同意</button>
				</view>
			</view>
			<view class="fixed-bottom" style="right: 50rpx;bottom: 70rpx;">
				<view v-if="info.list.status == 1" class="flex justify-end">
					<image src="@/static/img2/my/pass.png" mode="scaleToFill" style="width: 200rpx;height: 200rpx;"></image>
				</view>
				<view v-if="info.list.status == 2" class="flex justify-end">
					<image src="@/static/img2/my/refuse.png" mode="scaleToFill" style="width: 200rpx;height: 200rpx;"></image>
				</view>
			</view>
		</view>
		<!-- 名片交换审核 -->
		<view class="p-3" v-else-if="info.type_code == 2">
			<view class="flex justify-between" @click="goPages('/subPages/my/list/card/card_main?id=' + info.list.apply_uid)">
				<view class="flex">
					<u-avatar :src="info.list.userphoto" size="50" mode="aspectFill"></u-avatar>
					<view class="ml-2">
						<view class="flex flex-wrap align-center">
							<text class="font">{{ info.list.name || '未填写昵称' }}</text>
							<image v-if="info.list.attestation == 1" class="ml-1" src="@/static/img2/my/my_card/auth_icon.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
						</view>
						<view class="font-sm mt-1">
							<text>{{ info.list.companyname || '未填写公司名称' }}</text>
						</view>
					</view>
				</view>
				<view class="font_24 c_9 my-1">{{ info.list.time }}</view>
			</view>
			<view class="mt-3">
				<view class="font_24 c_9 my-1">验证信息：</view>
				<view class="font_24">{{ info.list.content }}</view>
			</view>
			<view class="sys_btns flex justify-center" v-if="info.list.status == 0">
				<button class="bg_main text-white h6 mx-1" @click="cardCheck(2)">拒绝</button>
				<button class="bg-info text-white h6 mx-1" @click="cardCheck(1)">同意</button>
			</view>
			<button v-else-if="info.list.status == 1" class="bg-info btn text-white h6 m-2">已同意</button>
			<button v-else-if="info.list.status == 2" class="btn text-white h6 m-2" style="background-color: #c2c2c2;">已拒绝</button>
			<button v-else-if="info.list.status == 3" class="btn text-white h6 m-2" style="background-color: #c2c2c2;">对方已取消申请</button>
			<button v-else class="btn text-white h6 m-2" style="background-color: #c2c2c2;">已失效</button>
			<u-modal
				:show="refuseShow"
				title="原因"
				confirmText="确认"
				cancelText="取消"
				:showCancelButton="true"
				confirmColor="#CF1526"
				cancelColor="#D3D3D3"
				@confirm="exChange"
				@cancel="refuseShow = false"
			>
				<view class="slot-content bg-white"><textarea v-model="refuseContent" placeholder="请输入您的拒绝原因" class="p-2" style="height: 194rpx;"></textarea></view>
			</u-modal>
		</view>
		<view class="bg-white pb-4 px-2" v-else>
			<view class="font-sm" :class="{ 'mt-3': info.type_code != 1 }">{{ info.content }}</view>
		</view>
	</view>
</template>

<script>
import { messageDetails, messageEnterpriseUp } from '@/api/my/inform.js';
import { enterpriseCard } from '@/api/my/card.js';
import util from '@/common/js/util.js';
export default {
	data() {
		return {
			title: '',
			info: {},
			msgId: '',
			// 名片审核
			refuseShow: false,
			refuseContent: '抱歉，暂时不太方便与您交换名片！'
		};
	},
	computed: {
		dataTime(val) {
			return function(val) {
				return util.getDateBeforeNow(val);
			};
		}
	},
	onLoad(option) {
		uni.setNavigationBarTitle({
			title: option.title
		});
		this.msgId = option.id;
		this.title = option.title;
		if (!uni.getStorageSync('userInfo').hasLogin) {
			// 未登录 登录后再跳回当前页面
			let msg = {
				title: 'cardSwap',
				id: option.id,
				tit: option.title
			};
			uni.setStorageSync('loginToPage', msg);
			this.toLogin(); //去登录
			return;
		}
		this.getInfo();
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		getInfo() {
			messageDetails({
				id: this.msgId,
				token: uni.getStorageSync('userInfo').token || ''
			})
				.then(res => {
					// console.log(res);
					if (res.code == 0) {
						this.info = res.data;
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取消息内容失败', err);
				});
		},
		// 子企业关联审核
		submit(state) {
			let msg = {
				id: this.info.relation_id,
				status: state,
				token: uni.getStorageSync('userInfo').token || ''
			};
			messageEnterpriseUp(msg)
				.then(res => {
					// console.log(res);
					uni.$u.toast(res.msg);
					if (res.code == 0) {
						this.getInfo();
					}
				})
				.catch(res => {
					console.log('关联企业审核失败', err);
				});
		},
		// 交换名片审核
		cardCheck(state) {
			if (state == 1) {
				//同意
				this.checkApi(1);
			} else {
				//拒绝
				this.refuseShow = true;
			}
		},
		exChange() {
			this.checkApi(2);
		},
		checkApi(val) {
			let msg = {
				status: val,
				refuse_content: this.refuseContent,
				exchange_id: this.info.list.id,
				id: this.info.id,
				name: this.info.list.name
			};
			enterpriseCard(msg)
				.then(res => {
					console.log(res);
					uni.$u.toast(res.msg);
					this.getInfo();
					this.refuseShow = false;
				})
				.catch(err => {
					console.log('审核失败', err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.sys_btns {
	margin: 38rpx auto;

	button {
		width: 220rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
}

.btn {
	width: 95%;
	height: 60rpx;
	line-height: 60rpx;
}

::v-deep .uni-input-input {
	text-align: right;
	color: #666666;
}

::v-deep .uni-input-placeholder {
	text-align: right;
}

::v-deep .u-form-item__body__right__message {
	text-align: right;
}

::v-deep .u-form-item__body__right__content__slot {
	justify-content: flex-end;
	padding-right: 20rpx;
}

::v-deep .u-input__content__field-wrapper__field {
	text-align: right !important;
}
</style>
